<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>04 获取dom元素的六中方式</title>
</head>

<body>
    <div id="content">
        <div id="box1">我是由id获取的元素</div>
        <input type="checkbox" name="hobby" />吃
        <input type="checkbox" name="hobby" />喝
        <input type="checkbox" name="hobby" />玩
        <input type="checkbox" name="hobby" />乐
        <div class="d1">我是class1</div>
        <div class="d1">我是class2</div>
        <p>我是元素选择器</p>
    </div>

    <script>
        //001
        var content = document.getElementById('content');
        console.log('content:', content, content.textContent);

        //002
        var dd = document.getElementsByClassName('d1');
        console.log('dd:', dd);

        //003
        var tags = document.getElementsByTagName('input');
        console.log('input:', tags);

        004
        var xi = document.getElementsByName('hobby')[0];
        console.log('xi:', xi);

        005
        var d = document.querySelector('.d1');
        console.log('d:', d);
        var d = document.querySelector('#content div.d1');
        console.log('d:', d);

        006
        var d1 = document.querySelectorAll('.d1');
        console.log('d1:', d1);
        var d1 = document.querySelectorAll('#content div.d1')[0];
        console.log('d1:', d1);
    </script>
</body>

</html>